<template>
  <div class="container">
    <div class="top">
      <el-breadcrumb separator=">">
        <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item>发布banner轮播</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="uploadSection">
      <p>点击添加banner图</p>
      <el-upload
        class="upload"
        ref="upload"
        action="#"
        :http-request="upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
</div>
</template>

<script>
import { uploadBanner } from "../../utils/api";
export default {
  data() {
    return {
      params: "",
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    // 上传banner
    upload(params) {
      const file = params.file;
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("file", file);
      form.append("type", "banner");
      uploadBanner(form).then(res => {
        // console.log(res);
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
  .container{
    .top {
      box-sizing: border-box;
      width: 100%;
      padding: 20px 0px 20px 20px;
      background: #fff;
      border-bottom: 1px solid #eee;
    }
    .uploadSection{
      box-sizing: border-box;
      width: 100%;
      padding: 20px 0px 20px 20px;
      background: #fff;
    }
  }
</style>
